<template>
    <div class="leftMain">
        <div class="ss1">{{ $t('text.System.l1') }}</div>
        <div class="leftTop2" v-for="item in leftRouterName.data" v-bind:key="item">
            <div class="df" @click="setPage(item)" :class="item.name == leftRouterName.default ? 'blueBg' : ''">
                <img class="img2" src="../../assets/images/icon.png" />
                <div class="items">{{ item.name }}</div>
            </div>
        </div>
    </div>

    <CompanyConfiguration v-if="leftRouterName.defaultIndex == 0" :title="leftRouterName.default"></CompanyConfiguration>
    <PostManagement v-if="leftRouterName.defaultIndex == 1" :title="leftRouterName.default"></PostManagement>
    <SecondHousing v-if="leftRouterName.defaultIndex == 2" :title="leftRouterName.default"></SecondHousing>
    <SourceTourists v-if="leftRouterName.defaultIndex == 3" :title="leftRouterName.default"></SourceTourists>
    <SystemContract  v-if="leftRouterName.defaultIndex == 4" :title="leftRouterName.default"></SystemContract>

</template>
  
<script>
import CompanyConfiguration from './CompanyConfiguration.vue'
import SourceTourists from './SourceTourists.vue'
import SecondHousing from './SecondHousing.vue'
import PostManagement from './PostManagement.vue'
import SystemContract from './SystemContract.vue'
export default {
    components: {
    CompanyConfiguration: CompanyConfiguration,
    SourceTourists: SourceTourists,
    SecondHousing: SecondHousing,
    PostManagement: PostManagement,
    SystemContract
},
    props: {
    },
    data() {
        return {
            leftRouterName: {
                default: this.$t('text.System.l2'),
                defaultIndex: 0,
                data: [
                    { index: 0, name: this.$t('text.System.l2') },
                    { index: 1, name: this.$t('text.System.l3') },
                    { index: 2, name: this.$t('text.System.l4') },
                    { index: 3, name: this.$t('text.System.l5') },
                    { index: 4, name: this.$t('text.System.a1') }
                ]
            },
        }
    },
    mounted() {
        if(localStorage.getItem('systemSettingLeft')){
            this.leftRouterName.defaultIndex=Number(localStorage.getItem('systemSettingLeft'))
            this.leftRouterName.default=this.leftRouterName.data.filter(v=>v.index=== Number(localStorage.getItem('systemSettingLeft')))[0].name
        }
    },
    methods: {
        setPage(item) {
            this.leftRouterName.default = item.name
            this.leftRouterName.defaultIndex = item.index
            localStorage.setItem('systemSettingLeft',item.index)
        }
    },
    watch: {
    },
    computed: {
    }

}
</script>
<style scoped>
input {
    border: none;
    outline: none;
    text-align: end;
}

textarea {
    width: 100%;
    border: none;
    outline: none;
}


.ss1 {
    color: #6698ff;
    font-size: 17px;
    text-align: left;
}

.leftMain {
    min-width: 310px;
    padding: 0 10px;
    border-right: solid 1px var(--el-menu-border-color);
    overflow: auto;
    margin: 10px 0;
}

.leftTop2 {
    border: 1px solid #cecece;
    border-radius: 5px;
    margin-top: 10px;
    position: relative;
    color: gray;
}

.df {
    display: flex;
    align-items: center;
    padding: 6px 10px;
}

.img2 {
    width: 22px;
    height: 22px;
}

.items {
    margin-left: 15px;
    font-size: 12px;
    width: 100%;
    text-align: left;
}

.blueBg {
    background: #6698ff;
    color: white;
}
</style>
  